import React from 'react';
import styles from './Home.module.scss';

interface HomeProps {
  isDark: boolean;
  toggleTheme: () => void;
}

const Home: React.FC<HomeProps> = ({ isDark, toggleTheme }) => {
  // 主题相关图片路径
  const bgImg = isDark ? '/indexLightBackground.png' : '/bg-day.png';
  const ceilImg = isDark ? '/ceil.png' : '/ceil-day.png';
  const floorImg = isDark ? '/floor.png' : '/floor-day.png';
  const borderImg = isDark ? '/border.png' : '/border-day.png';

  return (
    <div
      className={styles.fullScreenWrapper}
      style={{
        backgroundImage: `url(${bgImg})`,
      }}
    >
      {/* 顶部装饰 */}
      <img className={styles.ceilImg} src={ceilImg} alt="顶部装饰" />
      {/* 底部装饰 */}
      <img className={styles.floorImg} src={floorImg} alt="底部装饰" />
      {/* 底部边框 */}
      <img className={styles.borderBottomImg} src={borderImg} alt="底部边框" />



      {/* 右上角主题切换按钮 */}
      <button
        className={styles.topRightThemeBtn}
        onClick={() => {
          if (typeof toggleTheme === 'function') {
            toggleTheme();
          } else {
            alert('主题切换功能未正确传递！');
          }
        }}
      >
        {isDark ? '切换为日间主题' : '切换为夜间主题'}
      </button>

      {/* 右上角提示条 */}
      <div className={styles.noticeBar}>
        呼唤"<b>小维小维</b>"，开始新一轮对话
        <img className={styles.noticeGif} src="/notice.gif" alt="提示动图" />
      </div>

      {/* 头部主题切换按钮（如不需要可删除） */}

      <div className={styles.mainContent}>
        <div className={styles.leftPanel}>{/* 控制面板内容可补充 */}</div>
        <img className={styles.characterImg} src="" alt="数字人" />
        <div className={styles.centerArea}>
          <div className={styles.borderBox}>
            {/* 聊天气泡、二维码、语音按钮等可补充 */}
            <img className={styles.chatModelBtn} src="/chat-model.svg" alt="AI聊天" />
            <img className={styles.voiceBtn} src="/speaking.jpeg" alt="语音按钮" />
            {/* 底部插入视频 */}
            <div className={styles.video} style={{
                        backgroundImage: `url('/public/imgs/border.png')`,
                        backgroundSize: 'cover',
                        backgroundRepeat: 'no-repeat',
                        backgroundPosition: 'center center'
                    }}>
              <video
              src="https://www.w3schools.com/html/mov_bbb.mp4"
              controls
              style={{ width: '100%', borderRadius: '12px', marginTop: '32px', boxShadow: '0 2px 16px #0002' }}
            >
              您的浏览器不支持 video 标签。
            </video>
            </div>
          </div>
        </div>
        <div className={styles.bottomRightBtns}>
          <img className={styles.roundBtn} src="/chat-model.svg" alt="AI聊天" />
          <img className={styles.roundBtn} src="/answer-icon.svg" alt="问号按钮" />
          <img className={styles.roundBtn} src="/night-model.svg" alt="切换主题按钮" />
        </div>
      </div>
    </div>
  );
};

export default Home;